<!--  -->
<template>
  <div>
    <el-dialog title="分配角色" :visible="isShowAssignRole" @close="btnCancel">
      <!-- 多选框组 -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in rowsList" :key="item.id" :label="item.id">
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getRolesList } from '@/api/company'
import { getDetialById, assignRole } from '@/api/user'
export default {
  props: {
    isShowAssignRole: {
      type: Boolean
    }
  },
  data() {
    return {
      // 全部角色列表
      rowsList: [],
      // 被选中的角色
      checkList: [],
      userId: ''
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    async getRolesList() {
      const { rows } = await getRolesList()
      this.rowsList = rows
    },
    async getDetialById(id) {
      // 将每次的id记录下来,用于后面发请求
      this.userId = id
      // 回显时用户员工的数据  , 拿出里面的角色列表部分,复制到当前data
      const { roleIds } = await getDetialById(id)
      console.log('勾选数据', roleIds)
      this.checkList = roleIds
    },
    // 确定按钮事件
    async btnOK() {
      // 发送请求
      await assignRole({
        id: this.userId,
        roleIds: this.checkList
      })
      // 用户提示
      this.$message.success('操作成功')
      // 关闭弹窗
      this.$emit('update:isShowAssignRole', false)
    },
    // 取消按钮事件
    btnCancel() {
      // 清数据
      this.checkList = []
      // 关闭弹窗
      this.$emit('update:isShowAssignRole', false)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
